<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        html,
        body {
            user-select: none;
        }

        dl {
            width: 1190px;
            margin: 100px auto;
            text-align: center;
        }

        #cart_into {
            width: 142px;
            height: 46px;
            display: inline-block;
            text-align: center;
            line-height: 46px;
            background: #DF3033;
            color: #fff;
            margin: 30px 0;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="fl">
            <a href="../html/index.html"><img src="../img/logo.png" alt=""></a>
        </div>
        <h1>京东超市</h1>
        <div class="fr">
            <span class="fa fa-commenting-o"></span>
            <a href="#">
                <p>登录页面，调查问卷</p>
            </a>
        </div>
    </div>

    <div id="detail"></div>
    <div class="footer">
        <ul>
            <li><a href="#">关于我们</a>|</li>
            <li><a href="#">联系我们</a>|</li>
            <li><a href="#">人才招聘</a>|</li>
            <li><a href="#">商家入驻</a>|</li>
            <li><a href="#">广告服务</a>|</li>
            <li><a href="#">手机京东</a>|</li>
            <li><a href="#">友情链接</a>|</li>
            <li><a href="#">销售联盟</a>|</li>
            <li><a href="#">京东社区</a>|</li>
            <li><a href="#">京东公益</a>|</li>
            <li><a href="#">English Site</a></li>
        </ul><br>
        <p>Copyright © 2004-2020 京东JD.com 版权所有</p>
    </div>

    <script src="../js/jquery-1.11.0.js"></script>
    <!-- <script src="../js/cart.js"></script> -->
    <script>
        //取商品数据
        $.get("http://jx.xuzhixiang.top/ap/api/productlist.php", {
            uid: 65646
        }, data => {
            console.log(data)
            let goodsId = location.search.split("=")[1];
            console.log(goodsId);
            let str = "";
            str += `

                    <dl>
                        <dt><img src="${data.data[goodsId].pimg}" alt=""></dt>
                        <dd>${data.data[goodsId].pname}</dd>
                        <p id="money">￥${data.data[goodsId].pprice}</p>
                        <p>数量:<span class="min">&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;</span><input type="text" value="1" class="con"><span class="pull">+</span></p>
                        <span class="fa fa-cart-plus" id="cart_into">加入购物车</span>
                    </dl>

                    `;
            $("#detail").html(str);

            // 加减

            $(".min").click(function () {
                let val = +$(".con").val();
                val--;
                console.log(val)
                if (val == 0) {
                    $(".con").val(1);
                }
                $(".con").val(val);
            })
            $(".pull").click(function () {
                let val = +$(".con").val();
                val++;
                $(".con").val(val);
            })

            $(".con").change(function () {
                if ($(".con").val() <= 1) {
                    $(".con").val(1);
                }
            })
            $(".fa-cart-plus").click(function () {
                let val = $(".con").val();
                // console.log(val)
                $.get("http://jx.xuzhixiang.top/ap/api/add-product.php", {
                    uid: 65646,
                    pid: data.data[goodsId].pid,
                    pnum: val
                }, data => {
                    alert("加入购物车成功");
                    location.href = "cart.html";
                });
            })
        })
    </script>
</body>

</html>